<template>
  <div class="address-box">
    <s-header :title="'地址管理'" :back="'/user'"></s-header>
    <div class="address-item">
      <span id="spans" v-if="isShow">地址列表为空,请添加地址!</span>
      <van-address-list
        v-if="from != 'mine'"
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
        @select="select"
      />
      <van-address-list
        v-else
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
      />
    </div>
  </div>
</template>

<script lang='ts'>
import sHeader from "@/components/SimpleHeader";
import { defineComponent, reactive, onMounted, toRefs, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Toast } from "vant";
interface list {
  id: string;
  name: string;
  tel: string;
  address: string;
  isDefault: boolean;
}
type list_t<T extends list> = T extends list ? list : T;
interface item {
  CreatedAt: string;
  DeletedAt: null;
  ID: string;
  UpdatedAt: string;
  address_id: number;
  province: string;
  city: string;
  town: string;
  detail_address: string;
  isdefault: number;
  phone: string;
  sname: string;
  username: string;
}
interface newList {
  id: string;
  name: string;
  tel: string;
  address: string;
  isDefault: boolean;
}
interface datas {
  chosenAddressId: string;
  list: newList[];
  from: any;
}

import { getAddress } from "../service/address";
export default defineComponent({
  name: "address_item",
  components: { sHeader },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const isShow = ref(false);
    const datas: datas = reactive({
      chosenAddressId: "",
      list: [],
      from: route.query.from,
    });
    const onAdd = () => {
      router.push(`address-edit?type=add&from=${datas.from}`);
    };
    const onEdit = (item: list, index: number): void => {
      router.push(`address-edit?type=edit&ID=${item.id}&from=${datas.from}`);
    };
    const select = (item: list_t<list>, index: number) => {
      router.push(`create-order?&ID=${item.id}`);
    };
    onMounted(() => {
      // loginAddress({ username: "admin", password: "1234" });
      async function getData() {
        Toast.loading({
          message: "加载中...",
          forbidClick: true,
        });
        let data = await getAddress();
        // console.log(data);
        if (data.data.length === 0) isShow.value = true;
        let newList: newList[] = [];
        data.data.forEach((item: item, index: number) => {
          newList[index] = {
            id: item.ID,
            name: item.sname,
            tel: item.phone,
            address: `${item.province}${item.city}${item.town}${
              item.detail_address.split("/")[1]
            }`,
            isDefault: Boolean(item.isdefault),
          };
        });
        const isDefault = newList.filter((item) => item.isDefault);
        datas.list = newList;
        datas.chosenAddressId =
          isDefault[0] === undefined ? "" : isDefault[0].id;
        Toast.clear();
      }
      getData();
    });
    return { onAdd, onEdit, select, ...toRefs(datas), isShow };
  },
});
</script>

<style lang="less" scoped>
.address-box {
  background: #efefef;
  #spans {
    display: block;
    margin-top: 44px;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .van-address-list {
    margin-top: 44px;
  }
  ::v-deep .van-radio .van-radio__icon--round {
    display: none;
  }
  ::v-deep .van-address-list__bottom.van-safe-area-bottom {
    border: 1px solid white;
  }
  ::v-deep .van-address-list__bottom.van-safe-area-bottom .van-button {
    background: #1cacac !important;
    border: 1px solid #1cacac;
  }
}
</style>